<template>
  <div class="employee-container">
    <!-- 标题区域 -->
    <div class="header">
      <div class="search-area">
        <el-input
          v-model="input"
          placeholder="请输入员工姓名"
          class="search-input"
          @keyup.enter.native="handleSearch"
        >
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
            @click="handleSearch"
          />
        </el-input>
      </div>
      <div class="action-area">
        <el-button type="primary" class="add-btn" @click="handleAdd">
          <i class="el-icon-plus"> 添加 </i>
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-wrapper">
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
        >
          <el-table-column prop="name" label="员工姓名" width="150" />
          <el-table-column prop="username" label="账号" width="180" />
          <el-table-column prop="phone" label="手机号" width="150" />
          <el-table-column prop="status" label="账号状态" width="120">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 1 ? 'success' : 'danger'"
                size="small"
              >
                {{ scope.row.status === 1 ? "正常" : "已禁用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                class="edit-btn"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-divider direction="vertical" />
              <el-popconfirm
                title="确认调整该账号的状态?"
                @onConfirm="toggleStatus(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="small"
                  :class="scope.row.status === 1 ? 'disable-btn' : 'enable-btn'"
                >
                  {{ scope.row.status === 1 ? "禁用" : "启用" }}
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <Pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 编辑员工表单组件 -->
    <employeeForm
      :visible.sync="editDialogVisible"
      :form-data="editForm"
      :loading="saveLoading"
      :is-edit="isEditMode"
      @close="handleCloseDialog"
      @save="handleSave"
    />
  </div>
</template>

<script>
import {
  getList,
  updateEmployee,
  addEmployee,
  updateEmployeeStatus
} from '@/api/table'
import employeeForm from '@/views/dashboard/employeeForm.vue'
import Pagination from '@/components/Pagination'

export default {
  name: 'EmployeeManagement',
  components: {
    employeeForm,
    Pagination
  },
  data() {
    return {
      input: '',
      tableData: [],
      loading: false,
      total: 0,
      // 分页参数
      listQuery: {
        page: 1,
        limit: 10
      },
      // 对话框相关
      editDialogVisible: false,
      saveLoading: false,
      isEditMode: true, // true: 编辑模式, false: 添加模式
      editForm: {
        id: '',
        username: '',
        name: '',
        phone: '',
        sex: 1,
        idNumber: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSearch() {
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.listQuery.page = 1
        this.getList()
      }, 300)
    },
    // 表头样式
    headerCellStyle() {
      return {
        'background-color': '#f5f7fa',
        color: '#606266',
        'font-weight': '500',
        'border-bottom': '1px solid #e4e7ed',
        padding: '12px 0',
        'text-align': 'center'
      }
    },
    // 单元格样式
    cellStyle() {
      return {
        'border-bottom': '1px solid #e4e7ed',
        padding: '12px 0',
        'text-align': 'center'
      }
    },
    getList() {
      this.loading = true
      const params = {
        page: this.listQuery.page,
        pageSize: this.listQuery.limit
      }

      if (this.input) {
        params.name = this.input
      }

      getList(params)
        .then((response) => {
          if (response.data && response.data.records) {
            this.tableData = response.data.records
            this.total = response.data.total || 0
          } else {
            this.tableData = []
            this.total = 0
          }
          this.loading = false
        })
    },
    // 添加员工
    handleAdd() {
      this.isEditMode = false
      this.editForm = {
        id: '',
        username: '',
        name: '',
        phone: '',
        sex: 1,
        idNumber: ''
      }
      this.editDialogVisible = true
    },
    // 编辑员工
    handleEdit(row) {
      this.isEditMode = true
      this.editForm = JSON.parse(JSON.stringify(row))
      this.editDialogVisible = true
    },
    // 关闭对话框
    handleCloseDialog() {
      this.editDialogVisible = false
    },
    // 保存编辑或添加
    handleSave(formData) {
      this.saveLoading = true
      if (this.isEditMode) {
        // 编辑员工
        updateEmployee(formData).then((response) => {
          this.saveLoading = false
          this.editDialogVisible = false
          this.$message.success('修改成功')
          this.getList()
        })
      } else {
        // 添加员工
        addEmployee(formData).then((response) => {
          this.saveLoading = false
          this.editDialogVisible = false
          this.$message.success('添加成功')
          this.getList()
        })
      }
    },
    // 切换账号状态
    toggleStatus(row) {
      updateEmployeeStatus(row.id, +!row.status).then((response) => {
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-container {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 84px);
  width: 100%;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
  width: 100%;

  .search-area {
    display: flex;
    align-items: center;
  }

  .action-area {
    display: flex;
    align-items: center;
  }
}

.search-input {
  width: 300px;
}

.add-btn {
  background: #409eff;
  border-color: #409eff;

  &:hover {
    background: #66b1ff;
    border-color: #66b1ff;
  }

  &:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
  }
}

.table-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.table-container {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  width: 100%;
  max-width: 1200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  ::v-deep .el-table {
    border: none;
    width: 100% !important;

    th {
      background-color: #f5f7fa !important;
    }

    td,
    th {
      border-bottom: 1px solid #e4e7ed;
    }

    &::before {
      display: none;
    }

    .el-table__body-wrapper,
    .el-table__header-wrapper {
      width: 100% !important;
    }
  }
}

// 操作按钮样式
.edit-btn {
  color: #409eff !important;

  &:hover {
    color: #66b1ff !important;
  }
}

.disable-btn {
  color: #f56c6c !important;

  &:hover {
    color: #f78989 !important;
  }
}

.enable-btn {
  color: #67c23a !important;

  &:hover {
    color: #85ce61 !important;
  }
}

::v-deep .el-table .cell {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .el-table th > .cell {
  font-weight: 500;
}

// 确保表格列宽自适应
::v-deep .el-table__body,
::v-deep .el-table__header {
  width: 100% !important;
}

::v-deep .el-table__body-wrapper {
  overflow-x: auto;
}

// 响应式布局
@media (max-width: 1200px) {
  .table-container {
    max-width: 100%;
  }

  .employee-container {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .search-area {
    width: 100%;
  }

  .action-area {
    width: 100%;
    justify-content: flex-start;
  }

  .search-input {
    width: 100%;
  }

  .add-btn {
    width: 100%;
  }

  .employee-container {
    padding: 10px;
  }
}
</style>
